{% load i18n %}
<html><head>
<title>{% trans "Usage Summary Report" %}</title>
<link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/jqModal.css" />
<script src="/media/js/jqGrid/jquery.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/js/jqModal.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/js/jqDnR.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
              jQuery("#list").jqGrid({
                            url:'/agenda/ajax_jqgrid',
                            datatype: 'json',
                            colNames:['DATE', 'COUNTRY',  'TYPE', 'VENDOR NAME', 'ATTEMPTS', 'COMPLETED', 'ASR', 'RawDur', 'ACD', 'MIN CODE', 'AVG CODE', 'MAX CODE'],
                            colModel :[
                                {name:"Date", index:"Date", width:70, jsonmap:"Date",sortable:true },
                                {name:"Country", index:"Country", width:140, jsonmap:"Country",sortable:true },
                                {name:"Type", index:"Type", width:50, align:"left", jsonmap:"Type",sortable:false  },
                                {name:"VendorName", index:"VendorName", width:140, align:'left', jsonmap:"VendorName", sortable:false  },
                                {name:"Attempts", index:"Attempts", width:90, align:'left', jsonmap:"Attempts",sortable:false  },
                                {name:"Completed", index:"Completed", width:110, align:'left', jsonmap:"Completed",sortable:false  },
                                {name:"ASR", index:"ASR", width:50, align:'left', jsonmap:"ASR",sortable:false  },
                                {name:"RawDur", index:"RawDur", width:60, align:'left', jsonmap:"RawDur",sortable:false  },
                                {name:"ACD", index:"ACD", width:60, align:'left', jsonmap:"ACD",sortable:false  },
                                {name:"MinCode", index:"MinCode", width:90, align:'left', jsonmap:"MinCode",sortable:false  },
                                {name:"AvgCode", index:"AvgCode", width:90, align:'left', jsonmap:"AvgCode",sortable:false  },
                                {name:"MaxCode", index:"MaxCode", width:90, align:'left', jsonmap:"MaxCode",sortable:false  },
                            ], 
                            pager: jQuery('#pager'),
                            jsonReader: {
                                root: "rows",
                                id: "pk",
                                page: "page",
                                total: "total",
                                records: "records",
                                repeatitems: false,
                                cell: "fields"
							},
							sortname:"id",
							sortorder:"asc",
                            rowNum:5,
                            rowList:[5,10,20],
                            viewrecords:true,
                            imgpath:"/media/js/jqGrid/themes/basic/images",
                            caption:"Report Summary",
                            height:210,
                            toolbar: [true,'top'],
              });
			  $("#bsdata").click(function(){ jQuery("#list").searchGrid( {sopt:['cn','bw','eq','ne','lt','gt','ew']} ); });
			  jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});

});
</script>
</head>
<body>
	<div id="top" style="font-size:1.5em;color: #335533;font-size: 1.5em;margin: 0 0 0.5em;"><h2>Upload Page</h2></div>
	<div id="navi" style="border-bottom: 2px solid #000;">
		<a href="{% url upload %}">home</a> - <a href="{% url report %}">Report</a> - <a href="{% url graph %}">Graph</a>
	</div>
	<br />
	<div id="content">
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div></div>
<div align="center"><input type="BUTTON" id="bsdata" value="Search" /></div>
</br>
<br/>
<div id="footer" align="center" style="height: 30px; background-color:#335533;font-size: 1em;color:#fff;">2011 - Usage Sumary</div>
</body>
</html>
